<template>
  <div>
    <Row class="home-page-content" align="middle">
      <BtnPlain class="com-action-btn" type="primary" @click="goBack">返回</BtnPlain>
      <h3>变更历史记录</h3>
    </Row>

    <div class="home-page-content mt-20">
      <Table :columns="columns" :data="listData">
        <template slot-scope="{ row }" slot="beforeChange">
          <BtnText type="primary" @BtnClick="onBefore(row)">信息查看</BtnText>
        </template>
        <template slot-scope="{ row }" slot="afterChange">
          <BtnText type="primary" @BtnClick="onAfter(row)">信息查看</BtnText>
        </template>
      </Table>
    </div>

    <Modal v-model="modalValue" width="1100" title="信息详情" footer-hide>
      <div class="modal-info">
        <Row justify="space-between" align="middle">
          <Row align="middle">
            <BtnPlain
              v-if="info.auditStatus === 'UnderReview'"
              class="com-action-btn"
              type="error"
            >{{ info.auditStatusName }}</BtnPlain>
            <BtnPlain
              v-else
              class="com-action-btn"
              :type="info.acceptStatus | getAcceptStatus"
            >{{ info.acceptStatusName }}</BtnPlain>
          </Row>
          <div class="publisher">
            <span>发布人 {{ info.publisher || '--' }}</span>
            <span>发布时间 {{ info.publishTime || '--'}}</span>
          </div>
        </Row>
        <Row class="mt-20" justify="space-between" align="middle">
          <h3>{{ info.projectName }}</h3>
        </Row>

        <!-- 经营信息 -->
        <BusinessInfo :info="info" />
      </div>
    </Modal>
  </div>
</template>

<script>
import BusinessInfo from './common/businessInfo.vue'
import { busiInfoGetChangeData, busiInfoGetHistoryData } from '@/api/businessInformationManage.js'

export default {
  name: 'businessInfoHistory',
  components: { BusinessInfo },
  data () {
    return {
      busiInfoId: '',
      type: '',
      columns: [
        {
          title: '变更时间',
          key: 'changeTime',
        },
        {
          title: '变更前',
          slot: 'beforeChange',
        },
        {
          title: '变更后',
          slot: 'afterChange',
        },
      ],
      listData: [],
      modalValue: false,
      info: {},
    }
  },
  async created () {
    const { busiInfoId, type } = this.$route.query
    this.busiInfoId = busiInfoId
    this.type = type
    this.listData = await busiInfoGetChangeData({ busiInfoId })
  },
  methods: {
    async getInfo (busiHistoryId) {
      this.modalValue = true
      this.info = await busiInfoGetHistoryData({ busiHistoryId})
    },
    // 变更前
    onBefore (row) {
      this.getInfo(row.changeBeforeId)
    },
    // 变更后
    onAfter (row) {
      this.getInfo(row.changeAfterId)
    },
    goBack () {
      this.$router.replace({ path: '/businessInformationDetails', query: { busiInfoId: this.busiInfoId, type: this.type } })
    }
  }
}
</script>

<style lang='less' scoped>
.modal-info {
  height: 600px;
  overflow: scroll;
}
.mt-20 {
  margin-top: 20px;
}
.mb-20 {
  margin-bottom: 20px;
}
</style>
